/**
 * NavigationBar
 */
import React, {Component} from 'react';

import {PixelRatio, Platform, StyleSheet, Text, View, ViewPropTypes} from 'react-native';
import PropTypes from 'prop-types';
import {
    isIOS,
    NAV_BAR_HEIGHT_ANDROID,
    NAV_BAR_HEIGHT_IOS,
    STATUS_BAR_HEIGHT,
    windowWidth,
} from '../../configs/platform';
import {getStatusBarHeight} from 'react-native-status-bar-height';

const StatusBarShape = {
    barStyle: PropTypes.oneOf(['light-content', 'default']),
    hidden: PropTypes.bool,
    backgroundColor: PropTypes.string,
};
export default class NavigationBar extends Component {
    static propTypes = {
        style: ViewPropTypes.style,
        title: PropTypes.string,
        titleView: PropTypes.element,
        titleLayoutStyle: ViewPropTypes.style,
        hide: PropTypes.bool,
        statusBar: PropTypes.shape(StatusBarShape),
        rightButton: PropTypes.element,
        leftButton: PropTypes.element,
        backgroundColor: PropTypes.string,
        bottomLineHeight: PropTypes.number,
        titleTextColor: PropTypes.string,
        showCenter: PropTypes.bool,
    };
    static defaultProps = {
        statusBar: {
            barStyle: 'light-content',
            hidden: false,
            backgroundColor: '#F9D63B',
        },
        backgroundColor: '#F9D63B',
        titleTextColor: '#555555',
        bottomLineHeight: 0,
        showCenter: true,
    };

    constructor(props) {
        super(props);
        this.state = {
            title: '',
            hide: false,
            statusbarHeight: isIOS() ? 0 : getStatusBarHeight(),
        };
    }

    componentDidMount() {
    }

    getButtonElement(data) {
        return (
            <View style={styles.navBarButton}>
                {data ? data : null}
            </View>
        );
    }

    render() {
        let titleView = this.props.titleView ? this.props.titleView :
            <Text ellipsizeMode="head" numberOfLines={1}
                  style={[styles.title, {color: this.props.titleTextColor}]}>{this.props.title}</Text>;

        let content = this.props.hide ? null :
            <View style={styles.navBar}>
                {this.props.leftButton && this.getButtonElement(this.props.leftButton)}
                <View
                    style={[this.props.showCenter ? styles.navBarTitleContainer : styles.navBarTitleContainer_start, this.props.titleLayoutStyle]}>
                    {titleView}
                </View>
                {this.getButtonElement(this.props.rightButton)}
            </View>;
        return (
            <View style={{
                backgroundColor: this.props.backgroundColor, ...this.props.style,
                paddingTop: this.state.statusbarHeight,
            }}>
                {content}
                <View style={{
                    height: (this.props.bottomLineHeight / PixelRatio.get()),
                    width: windowWidth,
                    backgroundColor: '#EEEEEE',
                }}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    navBar: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
    },
    navBarTitleContainer_start: {
        alignItems: 'flex-start',
        justifyContent: 'center',
        flex: 1,
        paddingLeft: 10,
    },
    navBarTitleContainer: {
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        left: 40,
        top: 0,
        right: 40,
        bottom: 0,
    },
    title: {
        fontSize: 18,
        color: '#333333',
        fontWeight: 'bold',
    },
    navBarButton: {
        alignItems: 'center',
    },
    statusBar: {
        height: STATUS_BAR_HEIGHT,
    },
});
